<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
</head>

<body>
    <div id="dir_tree"></div>
    <div id="map">
    </div>
    <script>
        var docLayer = new Zondy.Map.Doc("", "zxd-plus-pla", {

        })
        var map = new ol.Map({
            target: "map",
            layers: [gaode, docLayer],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        /* 获取图层信息 */
        const docInfo = new Zondy.Catalog.MapDoc({
            docName: "zxd-plus-pla"
        })
        let children = []
        docInfo.getLayersInfo(data => {
            data.value.forEach(item => {
                var { GeomType, LayerIndex, Name } = item;
                children.push({
                    id: LayerIndex,
                    name: Name,
                    type: GeomType
                })

            })
            children.forEach(item => {
                var template = `<input checked type='checkbox' id="${item.id}"/> ${item.name}`
                $("#dir_tree").append(template)
            })
            /* 1、对checkbox执行点击事情,获取checked的状态值 */
            /* 2、根据状态设置图层的显示或隐藏 */
        })
        setTimeout(() => {
            $("#dir_tree input").change(function (evt) {
                /* id checked */
                let obj = evt.target;
                console.log(obj.id)  //图层
                console.log(obj.checked) //图层显示和隐藏
                docLayer.setLayerStatus([obj.id], obj.checked ? 'include' : 'exclude')
            })
        }, 200)

    </script>
</body>

</html>